<!DOCTYPE html>
<html>

<head>
    <meta charset=" utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>中国传统书画版式的实现</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <style>
        .paper {
            /*扇面的背景*/
            /*设置relative模式，不脱离文档流，但是可作为其内部absolute元素的包含块（定位坐标盒）*/
            position: relative;
            /*左右margin自动，则水平居中*/
            margin: auto;
            /*rem（font size of the root element）*/
            width: 40rem;
            height: 25rem;
            background-color: cornsilk;
        }

        /*clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);*/
        .spanbone {
            /*扇骨的基准尺寸，透明*/
            width: 3rem;
            height: 19em;
            /*绝对定位，相对于最近的非static祖先元素定位，就是.paper*/
            position: absolute;
            top: 3rem;
            /*50%左边放到了中间，还要减去元素自身的宽度，才精确在中间*/
            /*注意，calc里面的计算表达式，"-" 号两边需要有空格！！！*/
            left: calc(50% - 1.5rem);
        }
        .text {
            /*扇骨上面的文字*/
            position: absolute;
            background-color: transparent;
            /*竖排文字，从右到左排列block，本例只利用竖排功能*/
            writing-mode: vertical-rl;
            top: 0;
            left: 0;
            line-height: 3rem;
            padding-top: 1rem;
            font-size: 1.1rem;
        }

        .boneupper {
            /*扇骨上的白色部分*/
            position: absolute;
            width: 3rem;
            height: 10rem;
            top: 0rem;
            background-color: white;
            border-top: 0.2rem solid chocolate;
            border-bottom:0.2rem solid chocolate;
            /*用clip-path裁剪为梯形*/
            clip-path: polygon(10% 0%, 90% 0%, 75% 100%, 25% 100%);
        }
        .woodstick{
            /*扇骨的木质部分，巧克力色*/
            /*填满扇骨基准.spanbone*/
            width: 100%;
            height:100%;
            background-color:chocolate;
            /*用clip-path裁剪出扇骨*/
            clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);
        }
        /*在root伪类中定义全局变量*/
        :root{
            /*自定义变量，让所有扇骨整体旋转，调正扇子的位置*/
            --rotation-offset: 55deg;
        }
        /*不同的扇骨，用英文字符类标序*/
        .a{
            /*相对于扇骨水平50%，垂直90%旋转*/
            transform-origin: 50% 90%;
            /*第一扇不旋转，但是要旋转扇子的整体旋转偏移*/
            transform:rotate(calc(0deg + var(--rotation-offset)));
        }
        .b{
            transform-origin: 50% 90%;
            /*第二扇旋转11度，还要旋转扇子的整体旋转偏移*/
            /*注意取变量要用var()函数，calc计算，算符前后要有空格！！！*/
            transform:rotate(calc(-11deg + var(--rotation-offset)));}
        .c{
            transform-origin: 50% 90%;
            transform:rotate(calc(-22deg + var(--rotation-offset)));}
        .d{
            transform-origin: 50% 90%;
            transform:rotate(calc(-33deg + var(--rotation-offset)));}
        .e{
            transform-origin: 50% 90%;
            transform:rotate(calc(-44deg + var(--rotation-offset)));}
        .f{
            transform-origin: 50% 90%;
            transform:rotate(calc(-55deg + var(--rotation-offset)));}
        .g{
            transform-origin: 50% 90%;
            transform:rotate(calc(-66deg + var(--rotation-offset)));}
        .h{
            transform-origin: 50% 90%;
            transform:rotate(calc(-77deg + var(--rotation-offset)));}
        .i{
            transform-origin: 50% 90%;
            transform:rotate(calc(-88deg + var(--rotation-offset)));}
        .j{
            transform-origin: 50% 90%;
            transform:rotate(calc(-99deg + var(--rotation-offset)));}
        .k{
            transform-origin: 50% 90%;
            transform:rotate(calc(-110deg + var(--rotation-offset)));}
    </style>
</head>

<body>
    <h1>中国传统版式实现</h1>
    <h2>传统版式的分类</h2>
    <p>中国传统书画版式有：</p>
    <ul>
        <li>条幅</li>
        <li>楹联</li>
        <li>中堂</li>
        <li>斗方</li>
        <li>匾额</li>
        <li>条屏</li>
        <li>扇面</li>
        <li>册页</li>
        <li>手册</li>
    </ul>
    <p>在这里学习中国传统版式：<a href="../assets/书画作品的九种呈现形式.pdf">中国传统版式</a></p>

    <p>这些版式，用css都可以实现。</p>
    <h3>扇面版式</h3>
    <div class=paper>
        <div class="spanbone a">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>大江东去</div>
        </div>
        <div class="spanbone b">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>浪淘尽</div>
        </div>
        <div class="spanbone c">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>千古风流人物</div>
        </div>
        <div class="spanbone d">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>故垒西边</div>
        </div>
        <div class="spanbone e">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>人道是</div>
        </div>
        <div class="spanbone f">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>三国周郎赤壁</div>
        </div>
        <div class="spanbone g">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>乱石穿空</div>
        </div>
        <div class="spanbone h">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>惊涛拍岸</div>
        </div>
        <div class="spanbone i">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>卷起千堆雪</div>
        </div>
        <div class="spanbone j">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>江山如画</div>
        </div>
        <div class="spanbone k">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>一时多少豪杰</div>
        </div>
        </div>
        <h3>实现其他版式</h3>
        <p>我已经实现了扇面的布局，请选择其他的中国传统版式实现之。</p>
</body>

</html>